<template>
  <div class="w-line-chart"></div>
</template>

<script type='text/babel'>
  import WCommons from '../../../../static/js/wanba.commons'
  import ChartMixins from './ChartMixins'

  export default {
    mixins: [ChartMixins],
    props: {
      xAxisGridLineColor: {
        type: String,
        default: '#eeeeee'
      },
      xAxisGridLineWidth: {
        type: String,
        default: 0
      },
      xAxisLineColor: {
        type: String,
        default: ''
      },
      xAxisLineWidth: {
        type: Number,
        default: 0
      },
      xAxisLabelTextColor: {
        type: String,
        default: '#333333'
      },
      xAxisLabelTextSize: {
        type: Number,
        default: 12
      },
      xAxisLabelTextFamily: {
        type: String,
        default: 'sans-serif'
      },
      xAxisLabelRotation: {
        type: Number,
        default: 0
      },
      yAxisGridLineColor: {
        type: String,
        default: '#eeeeee'
      },
      yAxisGridLineWidth: {
        type: String,
        default: 1
      },
      yAxisLineColor: {
        type: String,
        default: ''
      },
      yAxisLineWidth: {
        type: Number,
        default: 0
      },
      yAxisLabelTextColor: {
        type: String,
        default: '#333333'
      },
      yAxisLabelTextSize: {
        type: Number,
        default: 12
      },
      yAxisLabelTextFamily: {
        type: String,
        default: 'sans-serif'
      },
      yAxisLabelRotation: {
        type: Number,
        default: 0
      }
    },
    created: function () {
      var self = this
      WCommons.extends(self.chartAdapter, {
        categories: function () {
          throw new Error('adapter的categories()方法未实现')
        },
        seriesCount: function () {
          throw new Error('adapter的seriesCount()方法未实现')
        },
        seriesName: function (index) {
          throw new Error('adapter的seriesName(index)方法未实现')
        },
        seriesDatas: function (index, name) {
          throw new Error('adapter的seriesData(index, name)方法未实现')
        }
      })
    },
    resolveDatasetChanged: function () {
      var self = this
      var a = self.chartAdapter
      var count = a.seriesCount()
      for (let i = 0; i < count; i++) {
        self.$options.chart.series[i].setData(a.seriesDatas(i, a.seriesName(i)))
      }
    },
    preConfigChartOptions: function () {
      var self = this
      return {
        chart: {
          type: 'areaspline',
          width: self.chartWidth,
          height: self.chartHeight
        },
        title: {
          text: self.chartTitle
        },
        legend: {
          enable: true
        },
        credits: {
          enabled: false
        },
        tooltip: {
          shared: true,
          valueSuffix: self.valueSuffix
        },
        plotOptions: {
          areaspline: {
            fillOpacity: 0.3
          }
        },
        xAxis: {
          tickLength: 0,
          categories: (function () {
            var a = self.chartAdapter
            return a.categories()
          })(),
          gridLineColor: self.xAxisGridLineColor,
          gridLineWidth: self.xAxisGridLineWidth,
          lineColor: self.xAxisLineColor,
          lineWidth: self.xAxisLineWidth,
          labels: {
            rotation: self.xAxisLabelRotation,
            style: {
              fontSize: self.xAxisLabelTextSize + 'px',
              fontFamily: self.xAxisLabelTextFamily,
              color: self.xAxisLabelTextColor
            }
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: ''
          },
          tickLength: 0,
          gridLineColor: self.yAxisGridLineColor,
          gridLineWidth: self.yAxisGridLineWidth,
          lineColor: self.yAxisLineColor,
          lineWidth: self.yAxisLineWidth,
          labels: {
            rotation: self.xAxisLabelRotation,
            style: {
              fontSize: self.yAxisLabelTextSize + 'px',
              fontFamily: self.yAxisLabelTextFamily,
              color: self.yAxisLabelTextColor
            }
          }
        },
        series: (function () {
          var series = []
          var a = self.chartAdapter
          var count = a.seriesCount()
          for (let i = 0; i < count; i++) {
            var item = {}
            item.name = a.seriesName(i)
            item.marker = {
              symbol: 'circle',
              radius: 4
            }
            item.data = a.seriesDatas(i, item.name)
            series.push(item)
          }
          return series
        })()
      }
    }
  }
</script>

<style>
</style>
